<template>
  <div class="UserShopDetails">
    <div class="navbar">
      <div class="topbar">
        <div class="title">围老商户后台管理系统</div>
        <div v-if="loginUser" class="infos">
          <el-image
            style="width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;"
            :src="require('@/assets/images/avatar.jpg')"
            fit="cover"
          />
          <div class="account">{{ loginUser }}</div>
          <el-button style="margin-left: 10px;" type="primary" icon="el-icon-switch-button" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="shopLeft">
        <el-steps direction="vertical" :active="step" space="200px">
          <el-step title="步骤 1" description="填写基本信息" />
          <el-step title="步骤 2" description="待审核人员对信息审核" />
          <el-step title="步骤 3" description="审核通过，进入店铺管理店铺" />
        </el-steps>
      </div>
      <div class="shopRight">
        <div v-if="stat===1" class="ele-audit-ok">
          <div class="left">
            <i class="el-icon-time" />
          </div>
          <div class="moddile" />
          <div class="right">
            <p class="audit-title-1">您的申请正在审核中</p>
            <p class="audit-title-2">请您耐心等候</p>
          </div>
        </div>
        <div v-if="stat===2" class="ele-audit-err">
          <div class="left">
            <div>
              <i class="el-icon-warning" />
            </div>
            <div>
              <p class="audit-title-3">您的申请审核不通过</p>
              <p class="audit-title-4">请更改后重新提交</p>
            </div>
          </div>
          <div class="right">
            <p>不同通过原因:</p>
            <p />
          </div>
        </div>
        <p class="shop-title">店铺基本信息</p>
        <!-- form -->
        <el-form :model="formData" :rules="rules">
          <el-form-item prop="admin" label="店铺管理员:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.admin"
              :disabled="state"
              placeholder="请输入店铺管理员"
            /></el-col>
          </el-form-item>
          <el-form-item prop="phone" label="联系方式:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.phone"
              :disabled="state"
              placeholder="请输入手机号"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="stat===2" prop="verCode" label="验证码:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.verCode"
              placeholder="请输入验证码"
            /></el-col>
            <el-col
              :span="2"
              :offset="1"
            ><el-button v-show="show" type="primary" @click="getVerCodeByMessage(1)">获取验证码</el-button>
              <el-button v-show="!show">{{ count }}秒后可以重发</el-button></el-col>
          </el-form-item>
          <el-form-item v-if="stat===0" class="ele-item-verification">
            <el-col :span="10">
              <el-alert :closable="false">
                <el-row type="flex">
                  <el-col :span="12"><span>未收到验证码？</span></el-col>
                  <el-col :span="18"><el-link type="primary" :underline="false" @click="getVerCodeByVoice">点击使用语音验证码</el-link></el-col>
                </el-row>
              </el-alert>
            </el-col>
          </el-form-item>
          <el-form-item prop="eshop" label="店铺类型:" class="ele-item-type">
            <el-col :span="5">
              <el-select
                v-model="formData.eshop"
                :disabled="true"
                class="ele-select-item"
              >
                <el-option label="企业店铺" value="0" />
                <el-option label="个人店铺" value="1" />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item prop="shopName" label="店铺名称:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.shopName"
              :disabled="state"
              placeholder="请输入店铺名称"
            /></el-col>
          </el-form-item>
          <el-form-item prop="address" label="地址:">
            <el-col :span="10" class="ele-select-address" style="margin-left: 0">
              <city-select ref="citySelect" v-model="formData.address" style="margin-left: 0" @change="changedAddress" />
            </el-col>
            <el-col :span="6" class="ele-select-address">
              <el-input v-model="formData.address.addressDetail" :disabled="state" placeholder="详细地址" />
            </el-col>
          </el-form-item>
          <!-- 个人店铺       审核中-->
          <el-form-item v-if="formData.eshop==='1'&&stat===1" prop="sfId" label="身份证号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.sfId"
              placeholder="输入身份证号码"
              :disabled="state"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="formData.eshop==='1'&&stat===1" label="身份证:" prop="sfImage">
            <el-col :span="5">
              <el-image fit="cover" :src="baseUrl+formData.sfImage.font">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </el-col>
            <el-col :span="5" :offset="1">
              <el-image fit="cover" :src="baseUrl+formData.sfImage.back">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </el-col>
          </el-form-item>
          <!-- 个人店铺       审核不通过-->
          <el-form-item v-if="formData.eshop==='1'&&stat===2" prop="sfId" label="身份证号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.sfId"
              :disabled="state"
              placeholder="输入身份证号码"
            /></el-col>
          </el-form-item>
          <div v-if="formData.eshop==='1'&&stat===2" class="audit-off">
            <el-form-item label="身份证:">
              <el-col :span="5" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 5}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfFont"
                  :on-remove="isRemoveLimitSfFont"
                  :class="{hide:hideUploadSfFont}"
                  :file-list="formData.sfImage.font"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </el-col>
              <el-col :span="5" :offset="1" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 5}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbacksfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfBack"
                  :on-remove="isRemoveLimitSfBack"
                  :class="{hide:hideUploadSfBack}"
                  :file-list="formData.sfImage.back"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
          </div>
          <!--企业店铺        审核中-->
          <el-form-item v-if="formData.eshop==='0'&&stat===1" prop="gname" label="公司名称:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.gname"
              :disabled="state"
              placeholder="输入与营业执照一支的公司名"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="formData.eshop==='0'&&stat===1" prop="Sid" label="纳税人识别号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.sid"
              :disabled="state"
              placeholder="输入与营业执照一致的纳税人识别号"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="formData.eshop==='0'&&stat===1" prop="SFid" label="法人身份证号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.SFid"
              :disabled="state"
              placeholder="输入与营业执照一致的法人身份证号"
            /></el-col>
          </el-form-item>
          <div v-if="formData.eshop==='0'&&stat===1" class="audit-ok">
            <el-form-item label="营业执照:" prop="YYZZ">
              <el-col :span="5">
                <el-image :src="baseUrl+formData.yyzz">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-col>
            </el-form-item>
            <el-form-item label="医疗器械许可证:" prop="YLQXBA">
              <el-col :span="5">
                <el-image :src="baseUrl+formData.ylqxba">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-col>
            </el-form-item>
            <el-form-item label="法人身份证:" prop="FDSFid">
              <el-col :span="5">
                <el-image :src="baseUrl+formData.frSFImage.font">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-col>
              <el-col :span="5" :offset="1">
                <el-image :src="baseUrl+formData.frSFImage.back">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </el-col>
            </el-form-item>
          </div>
          <!--企业店铺        审核不通过-->
          <el-form-item v-if="formData.eshop==='0'&&stat===2" prop="gname" label="公司名称:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.gname"
              :disabled="state"
              placeholder="输入与营业执照一支的公司名"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="formData.eshop==='0'&&stat===2" prop="Sid" label="纳税人识别号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.sid"
              :disabled="state"
              placeholder="输入与营业执照一致的纳税人识别号"
            /></el-col>
          </el-form-item>
          <el-form-item v-if="formData.eshop==='0'&&stat===2" prop="SFid" label="法人身份证号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.SFid"
              :disabled="state"
              placeholder="输入与营业执照一致的法人身份证号"
            /></el-col>
          </el-form-item>
          <div v-if="formData.eshop==='0'&&stat===2" class="audit-off">
            <el-form-item label="营业执照:" prop="yyzz">
              <el-col :span="5" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 0}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadyyzzUrl"
                  :limit="limitCount"
                  :on-change="isOverLimityyzz"
                  :on-remove="isRemoveLimityyzz"
                  :class="{hide:hideUploadyyzz}"
                  :file-list="formData.yyzz"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </el-col>
            </el-form-item>
            <el-form-item label="医疗器械许可证:" prop="ylqxba">
              <el-col :span="5" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 1}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadylqxUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitylqxba"
                  :on-remove="isRemoveLimitylqxba"
                  :class="{hide:hideUploadylqxba}"
                  :file-list="formData.ylqxba"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </el-col>
            </el-form-item>
            <el-form-item label="法人身份证:" prop="FDSFid">
              <el-col :span="5" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 2}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrFont"
                  :on-remove="isRemoveLimitFrFont"
                  :class="{hide:hideUploadFrFont}"
                  :file-list="formData.frSFImage.font"
                />
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </el-col>
              <el-col :span="5" :offset="1" class="ele-col-item">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 3}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbackfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrBack"
                  :on-remove="isRemoveLimitFrBack"
                  :class="{hide:hideUploadFrBack}"
                  :file-list="formData.frSFImage.back"
                />
              </el-col>
            </el-form-item>
          </div>

          <el-form-item v-if="stat===1" class="ele-submit">
            <el-col :span="5">
              <el-button
                type="primary"
                class="ele-submit-btn"
                @click="cancelAudit"
              >撤销审核</el-button>
            </el-col>
            <el-col :span="5">
              <el-button
                style="margin-left: 10px"
                class="ele-submit-btn"
                @click="$router.push({ name: 'ShopManager' })"
              >返回首页</el-button>
            </el-col>
          </el-form-item>
          <el-form-item v-if="stat===2" class="ele-submit">
            <el-col :span="5">
              <el-button
                type="primary"
                class="ele-submit-btn"
                @click="submitForm"
              >提交审核</el-button>
            </el-col>
            <el-col :span="5" :offset="2">
              <el-button
                class="ele-submit-btn"
                @click="$router.push({ name: 'ShopManager' })"
              >返回首页</el-button>
            </el-col>
            <el-col v-if="stat===2" :span="5" :offset="2">
              <el-button type="danger" style="margin-left: 10px" class="ele-submit-btn" @click="delShopDialog">删除店铺</el-button>
            </el-col>
          </el-form-item>
          <el-form-item v-if="stat===2" class="ele-foot">
            <el-col :span="6" :offset="4">
              <span
                class="ele-foot-text"
              >撤销审核后可重新进行编辑和重新提交审核</span>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 删除店铺对话框 -->
    <el-dialog
      :visible.sync="delDialog"
      class="ele-delShop"
      :before-close="handleShowDelShop"
      width="30%"
    >
      <template slot="title">
        <span class="el-dialog-title">提示</span>
      </template>
      <p class="del-shop-down">
        删除店铺后，店铺内所有数据将会被删除，因此造成的损失，平台概不负责，请确认删除店铺的风险后在进行删除操作。
      </p>
      <div class="del-content">
        <p>短信验证码</p>
        <el-row>
          <el-col :span="14"><el-input v-model="delVerCode" placeholder="请输入验证码" /></el-col>
          <el-col
            :span="2"
            :offset="1"
          ><el-button v-show="show" type="primary" @click="getVerCodeByMessage(2)">获取验证码</el-button>
            <el-button v-show="!show">{{ count }}</el-button></el-col>
        </el-row>
        <p>
          <span>未收到验证码？</span><el-button type="text" @click="getVerCodeByVoice(2)">点击使用语音验证码</el-button>
        </p>
        <p class="ele-font-del">
          验证码将发送到{{ formData.phone }}手机上，请注意查收
        </p>
        <p><el-checkbox v-model="Risks">我已知晓删除店铺的风险</el-checkbox></p>
      </div>
      <template slot="footer" class="del-footer">
        <el-button type="primary" @click="deletdShop">确认删除</el-button>
        <el-button plain @click="delDialog=!delDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from '@/api/upload'
import validate from '@/utils/formValidate'
import { getVerCode } from '@/api/auth'
import { createShop, delShop, revocatShop } from '@/api/shop'
import CitySelect from '@/components/CitySelect'
import { Loading } from 'element-ui'

export default {
  name: 'UserShopDetails',
  components: { CitySelect },
  data() {
    var valiIcon = (rule, value, callback) => {
      if (!this.serviceImg) {
        callback(new Error('请上传服务图片'))
      } else {
        callback()
      }
    }
    return {
      loginUser: null,
      step: 2,
      baseUrl: process.env.VUE_APP_BASE_API,
      state: false,
      stat: '',
      delDialog: false,
      Risks: true,
      delVerCode: '',
      /* src:
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',*/
      id: null,
      uploadPath,
      path: '/image',
      formData: {
        allCity: true,
        admin: '',
        phone: '',
        verCode: '',
        shopName: '',
        eshop: '1',
        address: {
          province: null,
          city: null,
          village: null,
          addressDetail: null
        },
        frSFImage: {
          font: [],
          back: []
        },
        sfImage: {
          font: [],
          back: []
        },
        gname: '',
        sid: '',
        SFid: '',
        sfId: '',
        yyzz: [],
        ylqxba: []
      },
      yyzz: '',
      ylqxba: '',
      frSFImage: {
        font: '',
        back: ''
      },
      sfImage: {
        font: '',
        back: ''
      },
      /** 倒计时*/
      show: true,
      count: '',
      timer: null,
      /** 上传限制*/
      limitCount: 1,
      hideUpload: false,
      props: { multiple: true },
      hideUploadyyzz: false,
      hideUploadylqxba: false,
      hideUploadFrFont: false,
      hideUploadFrBack: false,
      hideUploadSfFont: false,
      hideUploadSfBack: false,
      rules: {
        admin: [
          { required: true, message: '请输入店铺管理员', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { required: true, validator: validate.validatePhone }
        ],
        verCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        Eshop: [
          { type: 'array', required: true, message: '请输入店铺类型', trigger: 'blur' }
        ],
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择省市区', trigger: ['change', 'blur'] }
        ],
        gname: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        Sid: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        SFid: [
          { required: true, message: '请输入法人身份证号', trigger: 'blur' }
        ],
        yyzz: [
          { required: true, validator: valiIcon }
        ],
        YLQXBA: [
          { required: true, validator: valiIcon }
        ],
        FDSFid: [
          { required: true, message: '请输入店铺管理员', trigger: 'blur' }
        ],
        SFImage: [
          { required: true, validator: valiIcon }
        ]
      }
    }
  },
  created() {
    this.init()
    this.loginUser = this.$dd(localStorage.getItem('login-user')).loginUser
  },
  mounted() {
    const loadingInstance = Loading.service({ fullscreen: true })
    /* const params = this.$dd(this.$route.query.p)*/
    loadingInstance.close()
  },
  methods: {
    logout() {
      const vm = this
      vm.$confirm('确认退出登录吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$store.dispatch('LogOut').then(() => {
          vm.$router.push(`/LoginPage?redirect=${vm.$route.fullPath}`)
        })
      }).catch(() => {})
    },
    init() {
      const params = this.$dd(this.$route.query.p)

      this.id = params.data.id
      this.stat = params.data.stat
      this.formData.admin = params.data.concat
      this.formData.phone = params.data.phone
      this.formData.eshop = params.data.type.toString()
      /* this.formData.SFid = params.data.personCard*/
      this.formData.sfId = params.data.personCard
      this.formData.SFid = params.data.legalPersonCardNumber

      this.$nextTick(() => {
        console.log(this.$refs.citySelect)
        this.$refs.citySelect.setAddress(params.data.province, params.data.city, params.data.village)
      })

      this.formData.address.addressDetail = params.data.address
      if (this.stat === 1) {
        this.formData.sfImage.font = params.data.personPositiveCard
        this.formData.sfImage.back = params.data.personBackCard
        this.formData.yyzz = params.data.businessLicense
        this.formData.ylqxba = params.data.filingLicense
        this.formData.frSFImage.font = params.data.legalPersonPositiveCard
        this.formData.frSFImage.back = params.data.legalPersonBackCard
      } else if (this.stat === 2) {
        this.formData.sfImage.font = [{ name: 'personPositiveCard', url: this.$parseImgUrl(params.data.personPositiveCard), imgUrl: params.data.personPositiveCard }]
        this.hideUploadSfFont = this.formData.sfImage.font.length >= this.limitCount
        this.formData.sfImage.back = [{ name: 'personBackCard', url: this.$parseImgUrl(params.data.personBackCard), imgUrl: params.data.personBackCard }]
        this.hideUploadSfBack = this.formData.sfImage.back.length >= this.limitCount
        this.formData.yyzz = [{ name: 'businessLicense', url: this.$parseImgUrl(params.data.businessLicense), imgUrl: params.data.businessLicense }]
        this.hideUploadyyzz = this.formData.yyzz.length >= this.limitCount
        this.formData.ylqxba = [{ name: 'filingLicense', url: this.$parseImgUrl(params.data.filingLicense), imgUrl: params.data.filingLicense }]
        this.hideUploadylqxba = this.formData.ylqxba.length >= this.limitCount
        this.formData.frSFImage.font = [{ name: 'legalPersonPositiveCard', url: this.$parseImgUrl(params.data.legalPersonPositiveCard), imgUrl: params.data.legalPersonPositiveCard }]
        this.hideUploadFrFont = this.formData.frSFImage.font.length >= this.limitCount
        this.formData.frSFImage.back = [{ name: 'legalPersonBackCard', url: this.$parseImgUrl(params.data.legalPersonBackCard), imgUrl: params.data.legalPersonBackCard }]
        this.hideUploadFrBack = this.formData.frSFImage.back.length >= this.limitCount
      }

      this.formData.shopName = params.data.busiName

      this.formData.gname = params.data.companyName
      this.formData.sid = params.data.taxpayerNumber
      this.formData.SFid = params.data.legalPersonCardNumber

      if (this.stat === 1) {
        this.state = true
      } else if (this.stat === 2) {
        this.state = false
      }
    },
    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    /** 获取验证码*/
    getVerCodeByVoice(type) {
      if (this.formData.phone) {
        getVerCode(this.formData.phone, type, 1).then(response => {
          console.log(response.data)
        })
      } else {
        return this.$message.error('请先填写手机号码！')
      }
    },
    getVerCodeByMessage(type) {
      if (this.formData.phone) {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        getVerCode(this.formData.phone, type, 0).then(response => {
          console.log(response.data)
        })
      } else {
        return this.$message.error('请先填写手机号码！')
      }
    },
    // 图片大小限制
    beforeAvatarUpload: function(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt5M
    },
    // 营业执照路径
    uploadyyzzUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.yyzz.push(file)
      console.log(this.formData.yyzz)
    },
    // 医疗器械路径
    uploadylqxUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.ylqxba.push(file)
    },
    // 法人身份证正面路径
    uploadfontfrsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.frSFImage.font.push(file)
    },
    // 法人身份证反面路径
    uploadbackfrsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.frSFImage.back.push(file)
    },
    // 身份证正面路径
    uploadfontsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.sfImage.font.push(file)
    },
    // 身份证反面路径
    uploadbacksfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.sfImage.back.push(file)
    },
    /** 图片限制判断隐藏上传*/
    isOverLimityyzz(file, fileList) {
      this.hideUploadyyzz = fileList.length >= this.limitCount
    },
    isOverLimitylqxba(file, fileList) {
      this.hideUploadylqxba = fileList.length >= this.limitCount
    },
    isOverLimitFrFont(file, fileList) {
      this.hideUploadFrFont = fileList.length >= this.limitCount
    },
    isOverLimitFrBack(file, fileList) {
      this.hideUploadFrBack = fileList.length >= this.limitCount
    },
    isOverLimitSfFont(file, fileList) {
      this.hideUploadSfFont = fileList.length >= this.limitCount
    },
    isOverLimitSfBack(file, fileList) {
      this.hideUploadSfBack = fileList.length >= this.limitCount
    },
    isRemoveLimityyzz(file, fileList) {
      this.hideUploadyyzz = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.yyzz, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.yyzz.splice(index, 1)
      }
    },
    isRemoveLimitylqxba(file, fileList) {
      this.hideUploadylqxba = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.ylqxba, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.ylqxba.splice(index, 1)
      }
    },
    isRemoveLimitFrFont(file, fileList) {
      this.hideUploadFrFont = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.frSFImage.font, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.frSFImage.font.splice(index, 1)
      }
    },
    isRemoveLimitFrBack(file, fileList) {
      this.hideUploadFrBack = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.frSFImage.back, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.frSFImage.back.splice(index, 1)
      }
    },
    isRemoveLimitSfFont(file, fileList) {
      this.hideUploadSfFont = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.sfImage.font, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.sfImage.font.splice(index, 1)
      }
    },
    isRemoveLimitSfBack(file, fileList) {
      this.hideUploadSfBack = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.sfImage.back, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.sfImage.back.splice(index, 1)
      }
    },
    /** 删除弹出框*/
    delShopDialog(data) {
      this.delDialog = true
    },
    /** 删除店铺 */
    deletdShop() {
      if (!this.delVerCode) {
        return this.$message.error('验证码不能为空')
      }
      if (!this.Risks) {
        return this.$message.error('请确认删除风险')
      }
      delShop(this.id, this.formData.phone, this.delVerCode)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleShowDelShop() {
      this.delDialog = !this.delDialog
    },
    /** 撤销审核*/
    cancelAudit() {
      const loadingInstance = Loading.service({ fullscreen: true })
      revocatShop(this.id, 0).then(response => {
        loadingInstance.close()
        this.$message.success('撤销审核成功')
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    /** 重新提交审核*/
    // 提交
    submitForm() {
      // 校验

      if (!this.formData.admin) {
        return this.$message.error('店铺管理员不能为空')
      }
      if (!this.formData.phone) {
        return this.$message({ type: 'error', message: '店铺联系电话不能为空' })
      }
      if (!this.formData.verCode) {
        return this.$message({ type: 'error', message: '验证码不能为空' })
      }
      if (!this.formData.eshop) {
        return this.$message({ type: 'error', message: '请选择店铺类型' })
      }
      if (!this.formData.shopName) {
        return this.$message({ type: 'error', message: '店铺名称不能为空' })
      }
      if (!this.formData.address.province) {
        return this.$message({ type: 'error', message: '省份不能为空' })
      }
      if (!this.formData.address.city) {
        return this.$message({ type: 'error', message: '城市不能为空' })
      }
      if (!this.formData.address.village) {
        return this.$message({ type: 'error', message: '区不能为空' })
      }
      if (!this.formData.address.addressDetail) {
        return this.$message({ type: 'error', message: '详细地址不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.gname) {
        return this.$message({ type: 'error', message: '公司名称不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.sid) {
        return this.$message({ type: 'error', message: '纳税人识别号不能为空' })
      }
      /* if(!this.id&&!this.formData.SFid){
        return this.$message({type:'error',message:'身份证号不能为空'})
      }*/
      if (this.formData.eshop === '1' && !this.formData.sfId) {
        return this.$message({ type: 'error', message: '个人身份证号不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.SFid) {
        return this.$message({ type: 'error', message: '法人身份证号不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.yyzz) {
        return this.$message({ type: 'error', message: '营业执照不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.ylqxba) {
        return this.$message({ type: 'error', message: '医疗器械备案许可证不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.frSFImage.font) {
        return this.$message({ type: 'error', message: '法人身份证正面不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.frSFImage.back) {
        return this.$message({ type: 'error', message: '法人身份证反面不能为空' })
      }
      if (this.formData.eshop === '1' && !this.formData.sfImage.back) {
        return this.$message({ type: 'error', message: '身份证反面不能为空' })
      }
      if (this.formData.eshop === '1' && !this.formData.sfImage.font) {
        return this.$message({ type: 'error', message: '身份证正面不能为空' })
      }
      const sfId = this.formData.eshop === '1' ? this.formData.sfId : this.formData.SFid
      const form = {
        id: this.id,
        admin: this.formData.admin,
        phone: this.formData.phone,
        verCode: this.formData.verCode,
        eshop: this.formData.eshop,
        shopName: this.formData.shopName,
        shopAddress: {
          shengId: this.formData.address.province.code,
          sheng: this.formData.address.province.name,
          shiId: this.formData.address.city.code,
          shi: this.formData.address.city.name,
          quId: this.formData.address.village.code,
          qu: this.formData.address.village.name,
          addressDetail: this.formData.address.addressDetail
        },
        gname: this.formData.gname,
        sid: this.formData.sid,
        sfid: sfId,
        yyzz: this.formData.yyzz.length > 0 ? this.formData.yyzz[0].imgUrl : null,
        ylqxba: this.formData.ylqxba.length > 0 ? this.formData.ylqxba[0].imgUrl : null,
        sfImage: {
          font: this.formData.sfImage.font.length > 0 ? this.formData.sfImage.font[0].imgUrl : null,
          back: this.formData.sfImage.back.length > 0 ? this.formData.sfImage.back[0].imgUrl : null
        },
        frSFImage: {
          font: this.formData.frSFImage.font.length > 0 ? this.formData.frSFImage.font[0].imgUrl : null,
          back: this.formData.frSFImage.back.length > 0 ? this.formData.frSFImage.back[0].imgUrl : null
        }
      }
      console.log(form)
      const loadingInstance = Loading.service({ fullscreen: true })
      createShop(form).then(response => {
        console.log(response.data)
        this.$message({ type: 'success', message: '店铺添加成功' })
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    /** 删除店铺*/
    deleteShop() {
      delShop()
    }
  }
}
</script>

<style lang="scss" scoped>
.UserShopDetails {
  padding-bottom: 100px;

  .navbar {
    z-index: 100;
    width: 100%;
    background: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    position: fixed;
    top: 0;

    .topbar {
      padding: 0 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 1200px;

      .title {
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
      }

      .infos {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .account {
          font-size: 14px;
          color: #ffffff;
        }
      }

    }
  }

  .page-body {
    margin: 0 auto;
    padding-top: 64px;
    width: 1024px;
    display: flex;
    flex-direction: row;
  }

  .shopLeft {
    width: 200px;
    padding:20% 0px 0px 0px;
  }

  .shopRight {
    flex-grow: 1;
    .ele-audit-ok {
      margin: 50px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e6e6e6;
      border-radius: 5px;
      padding: 30px 0px;
      .left {
        i {
          font-size: 4rem;
          color: green;
        }
      }
      .moddile {
        width: 40px;
      }
      .right {
        .audit-title-1,
        .audit-title-3 {
          font-size: 24px;
          margin: 10px 0px;
        }
        .audit-title-1 {
          color: green;
        }
      }
    }
    .ele-audit-err {
      display: flex;
      justify-content: space-evenly;
      border: 1px solid #e6e6e6;
      border-radius: 5px;
      padding: 30px 0px;
      margin-bottom: 50px;
      .left {
        display: flex;
        align-items: center;
        div {
          i {
            font-size: 4rem;
            color: red;
          }
          .audit-title-3 {
            font-size: 24px;
            color: red;
          }
          .audit-title-4 {
            font-size: 0.95rem;
          }
        }
        div:first-child {
          margin-right: 40px;
        }
      }
      .right {
        p {
          font-size: 0.95rem;
        }
      }
    }
    .shop-title {
      font-size: 18px;
      font-weight: bold;
    }
    ::v-deep.el-form {
      .el-form-item__label {
        width: 200px;
        text-align: start;
      }
      .ele-item-verification {
        position: relative;
        .ele-col-verification {
          padding-left: 12px;
          position: absolute;
          top: -25px;
        }
      }
      .ele-item-type {
        margin-top: 35px;
        .ele-select-item {
          width: 100%;
        }
      }
      .ele-select-address {
        margin-left: 20px;
      }

      .ele-submit {
        margin-left: 200px;
        .ele-submit-btn {
          width: 100%;
          height: 50px;
        }
      }
      .ele-foot {
        .ele-foot-text {
          margin-left: 12px;
          white-space: nowrap;
        }
      }
      .audit-off {
        .ele-col-item {
          position: relative;
          .upload-demo {
            position: absolute;
            z-index: 1000;
            top: -50px;
            left: -25px;
            transform: translateY(60px) translateX(49%);
            /*::v-deep.el-upload--picture-card {
              background: none;
              border: none;
            }*/
            .up-btn-load {
              width: 120px;
            }
            .el-upload-list {
              position: absolute;
              left: 0;
            }
          }
          .ele-introduce {
            margin: 0;
            white-space: nowrap;
            font-size: 14px;
            color: gray;
          }
        }
      }
    }
    /*::v-deep.el-image {
      .el-image__inner {
        width: 240px;
      }
    }*/
    ::v-deep .background-hide .el-upload {
      background: none !important;
      border: none !important;
    }
    ::v-deep .hide .el-upload--picture-card {
      display: none !important;
    }
  }
}
</style>
